<template>
  <cross-line :text="crossText" v-if="crossVisible" v-model:visible="visible" />
  <el-skeleton :loading="loading" animated :count="3">
    <template #default>
      <cmp-form
        inline
        v-show="visible"
        v-model="modelValue"
        :formItems="formItems"
        :labelWidth="labelWidth"
        :initialValues="{ ...initialValues }"
        :options="options"
        :rules="rules"
        :disabled="disabled"
      />
    </template>
  </el-skeleton>
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs } from 'vue'
import CmpForm from '@/components/Form/nolineIndex.vue'
import { FormItems } from '@/components/Form/types'
import { ObjectType } from 'typings/interfaces'
import CrossLine from './CrossLine.vue'
import useRender from '../hooks/useRender'

export default defineComponent({
  name: 'OperateModal',
  emits: ['update:modelValue'],
  props: {
    formItems: {
      type: Array as PropType<FormItems>,
      required: true,
    },
    options: {
      type: Object as PropType<ObjectType>,
      default: () => ({}),
    },
    labelWidth: {
      type: String,
      required: true,
    },
    initialValues: {
      type: Object as PropType<ObjectType>,
      default: () => ({}),
    },
    crossText: {
      type: String,
      required: true,
    },
    crossVisible: {
      type: Blob,
      required: true,
      default: () => true,
    },
    modelValue: {
      type: Object as PropType<ObjectType>,
      required: true,
    },
    disabled: {
      type: Boolean,
      required: false,
    },
    rules: {
      type: Object as PropType<ObjectType>,
      default: () => ({}),
    },
    isOpened: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    CmpForm,
    CrossLine,
  },
  setup(props) {
    const { isOpened } = toRefs(props)
    const { visible, loading } = useRender(isOpened)
    return {
      visible,
      loading,
    }
  },
})
</script>
<style lang="scss" scoped>
.btn-group {
  display: flex;
  justify-content: flex-end;
}
.title {
  width: 100%;
  display: flex;
  align-items: center;
  span {
    width: 60px;
  }
  hr {
    width: 100%;
    border: 1px solid #5bb0ff;
  }
}
</style>
